<template>
	<div class="category" >
		<!-- 切换的点击区域 -->
		<ul class="title-ul">
			<!-- 当点击事件的时候:标题默认效果切换,选项卡之间也需要切换 -->
			<li v-for="item in tabs" :key="item.id" :class="{ 'default' : iscur===item.id }" @click="iscur = item.id" >
				{{item.name}}
				<span class="default-span" ></span>
			</li>
		</ul>
		<CategoryTab1 v-if="iscur === 1" :propscategoryTab1_son="tab1List" ></CategoryTab1>
		<CategoryTab2 v-if="iscur === 2" :propscategoryTab2_son="tab2List" ></CategoryTab2>
	</div>
</template>

<script>
	import CategoryTab1 from './CategoryTab1.vue';
	import CategoryTab2 from './CategoryTab2.vue';
	export default{
		name : 'Category',
		props : {
			propscategory : {
				type : Object,
				default :function(){
					return {}
				}
			},
			prop_ppp : {
				type : Object,
				default :function(){
					return {}
				}
			}
		},
		components : {
			CategoryTab1,
			CategoryTab2
		},
		watch : {
			propscategory(){
				this.tabs = this.propscategory;
			},
			prop_ppp(){
				// console.log(this.prop_ppp.tab1List);
				this.tab1List = this.prop_ppp.tab1List;
				this.tab2List = this.prop_ppp.tab2List;
			}
		},
		data(){
			return{
				tabs : [
					// { id : 1 , name : '热门度假' },
					// { id : 2 , name : '热门景点' }
				],
				tab1List : [],
				tab2List : [],
				iscur : 1,	// 默认选中第一个标题以及第一个组价
			}
		},
		created(){
			let that = this;
			// 向dataHome.json文件发起异步请求
			this.axios.get('api/dataHome.json').then( (res)=>{
				let data = res.data.Homemsg[0];
				
				
			} ).catch( (error)=>{
				console.log( error );
			} )
		}
	}
</script>

<style scoped >
	.category{
		width: 90%;
		margin: 0.5rem auto;
		/* background-color: #004444; */
		height: 12rem;
	}
	.category .title-ul{
		height: 1.17rem;
		background-color: #eeeeee;
		width: 100%;
		border-radius: 0.3rem;
		display: flex;
		align-items: center;
		overflow: hidden;
	}
	.category .title-ul li{
		width: 50%;
		text-align: center;
		line-height: 1.17rem;
		font-size: 0.35rem;
		font-weight: bold;
		/* border-radius: 0.3rem; */
		position: relative;
	}
	.category .title-ul .default{
		background-color: white;
	}
	.category .title-ul .default .default-span{
		display: block;
		background-color: gold;
		height: 0.1rem;
		width: 1rem;
		position: absolute;
		left: 50%;
		bottom: 18%;
		margin-left: -0.5rem;
	}
</style>
